<template>
  <div class="dashboard-editor-container">
    <div class="clearfix">
      <pan-thumb
        :image="avatar"
        style="float: left"
      >
        Your roles:
        <span
          v-for="item in roles"
          :key="item"
          class="info-roles"
        >{{ item }}</span>
      </pan-thumb>
      <div class="info-container">
        <span class="display_name">{{ name }}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
      </div>
    </div>
    <p />
    <el-autocomplete-package
      :value="value"
      :c-m="autocompleteData"
      @input="handleValue($event)"
    />
    <el-button-package :c-m="buttonData" />
    <el-dropdown-package :c-m="dropdownData" />
    <!--
    <el-tree-package
      v-show="statusButtonActive"
      :c-m="treeData"
    />
    <tg-button-status
      :active.sync="statusButtonActive"
      :button-c-m="statusButtonData"
    />
    <tg-form-basic
      title="TgBasicForm"
      :max-height="500"
      :hold-height="false"
      :form="formData"
      :control-bar="controlBarData"
    />
    <tg-form-basic-dialog
      ref="ref-tg-form-basic-dialog"
      title="TgFormBasicDialog"
      :max-height="500"
      :hold-height="false"
      :form="formData"
      :control-bar="controlBarData"
    />
    <tg-form-basic-popover
      ref="ref-tg-form-popover"
      title="TgFormBasicPopover"
      :max-height="500"
      :hold-height="false"
      :form="formData"
      :control-bar="controlBarData"
      :reference-c-m="buttonData"
    />
    <tg-table-basic
      ref="ref-tg-table-basic"
      :max-height="500"
      :table="tableData"
      :control-bar="controlBarData"
      :searcher="formData"
    />
    <tg-table-basic-dialog
      ref="ref-tg-table-basic-dialog"
      title="TgTableBasicDialog"
      :table="tableData"
      :control-bar="controlBarData"
      :searcher="formData"
    />
    <tg-tree-basic
      ref="ref-tg-tree-basic"
      :max-height="500"
      :hold-height="true"
      :tree="treeData"
      :control-bar="controlBarData"
    />
    -->
    <tg-table-category
      ref="ref-tg-table-category"
      title="TgTableCategory"
      :table="tableData"
      :control-bar="controlBarData"
      :searcher="formData"
      :category="treeData"
      :category-linkage="categoryLinkage"
    />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AxiosResponse } from 'axios'
import { TreeNode } from 'element-ui/types/tree'
import { ComponentModel } from '@TG/interface'
import { ITgFormBasicDialog, ITgTableBasic, ITgTableBasicDialog, ITgTreeBasic, ITgTableCategory } from '@TG/interface/types/component'
import { userModule } from '@TG/store/modules/user'
import { buildFormItem, buildInput, buildInputOption } from '../../../kit/element/formBuild'
import { buildTableItem } from '../../../kit/element/tableBuild'
import { emptyResponse } from '../../../kit/request'
import PanThumb from '@/components/PanThumb/index.vue'
import ElAutocompletePackage from '@TG/components/ElPackage/ElAutocompletePackage.vue'
import ElButtonPackage from '@TG/components/ElPackage/ElButtonPackage.vue'
import ElDropdownPackage from '@TG/components/ElPackage/ElDropdownPackage.vue'
import ElTablePackage from '@TG/components/ElPackage/ElTablePackage.vue'
import ElTreePackage from '@TG/components/ElPackage/ElTreePackage.vue'
import TgButtonStatus from '@TG/components/TgButton/TgButtonStatus.vue'
import TgFormBasic from '@TG/components/TgForm/TgFormBasic.vue'
import TgFormBasicDialog from '@TG/components/TgForm/TgFormBasicDialog.vue'
import TgFormBasicPopover from '@TG/components/TgForm/TgFormBasicPopover.vue'
import TgTableBasic from '@TG/components/TgTable/TgTableBasic.vue'
import TgTableBasicDialog from '@TG/components/TgTable/TgTableBasicDialog.vue'
import TgTableCategory from '@TG/components/TgTable/TgTableCategory.vue'
import TgTreeBasic from '@TG/components/TgTree/TgTreeBasic.vue'
import { isNotEmpty } from '../../../kit/validate'

@Component({
  name: 'DashboardEditor',
  components: {
    PanThumb,
    ElAutocompletePackage,
    ElButtonPackage,
    ElDropdownPackage,
    ElTreePackage,
    TgButtonStatus,
    TgFormBasic,
    TgFormBasicDialog,
    TgFormBasicPopover,
    TgTableBasic,
    TgTableBasicDialog,
    TgTableCategory,
    TgTreeBasic
  }
})
export default class extends Vue {
  private value: any = ''
  private boole: boolean = true
  private model: any = {}
  private autocompleteData: ComponentModel = {
    props: new Map<string, any>([
      ['placeholder', '请输入员工号 / 姓名 ...'],
      ['value-key', 'S_NUMBER'],
      ['trigger-on-focus', false],
      ['fetch-suggestions', function(queryString: any, callback: (data: any[]) => void) {
        const data = [
          { S_NAME: 'NAME-01', S_NUMBER: 'NUMBER-01' },
          { S_NAME: 'NAME-02', S_NUMBER: 'NUMBER-02' },
          { S_NAME: 'NAME-03', S_NUMBER: 'NUMBER-03' },
          { S_NAME: 'NAME-04', S_NUMBER: 'NUMBER-04' },
          { S_NAME: 'NAME-05', S_NUMBER: 'NUMBER-05' }
        ]
        callback(data)
      }]
    ]),
    meta: {
      slots: [
        {
          slot: 'append',
          CM: {
            tag: 'el-button',
            props: { icon: 'el-icon-antd-download' },
            events: {
              click: function() {
                alert('ElAutocompletePackage')
              }
            }
          }
        }
      ],
      template: [
        { tag: 'div', style: '', prop: 'S_NAME' },
        { tag: 'div', style: 'line-height: 18px; font-size: 12px; color: #b4b4b4; padding-left: 14px', prop: 'S_NUMBER' }
      ]
    }
  }
  private buttonData: ComponentModel = {
    text: 'ElButtonPackage',
    props: new Map<string, any>([
      ['icon', 'el-icon-edit']
    ]),
    events: new Map<string, Function | Function[]>([
      ['click', () => {
        const formDialogRef = this.$refs['ref-tg-form-basic-dialog'] as ITgFormBasicDialog
        if (isNotEmpty(formDialogRef)) {
          formDialogRef.showDialog()
        }
        const tableDialogRef = this.$refs['ref-tg-table-basic-dialog'] as ITgTableBasicDialog
        if (isNotEmpty(tableDialogRef)) {
          tableDialogRef.showDialog()
        }
      }]
    ]),
    meta: {
      tip: 'open form'
    }
  }
  private dropdownData: ComponentModel = {
    text: 'ElDropdownPackage',
    items: [
      { text: '黄金糕' },
      { text: '狮子头' },
      { text: '螺蛳粉' },
      { text: '双皮奶' },
      { text: '蚵仔煎' }
    ],
    meta: {
      trigger: {
        meta: {
          tip: 'ElDropdownPackage'
        }
      }
    }
  }
  private treeData: {
    'node-key': string
    load?: (node: TreeNode<any, any>, params: any) => Promise<AxiosResponse<any>>
    menu?: ComponentModel
  } = {
    'node-key': 'input01',
    load: (node: TreeNode<any, any>, params: any) => {
      return Promise.resolve(emptyResponse([
        { input01: '01', label: '01' },
        { input01: '02', label: '02' },
        { input01: '03', label: '03' },
        { input01: '04', label: '04' },
        {
          input01: '05',
          label: '05',
          children: [
            { input01: '05-01', label: '05-01' },
            { input01: '05-02', label: '05-02' },
            { input01: '05-03', label: '05-03' }
          ]
        }
      ]))
    },
    menu: {
      events: new Map<string, Function | Function[]>([
        ['command', (command: any, data: any) => {
          console.log(command, data)
        }]
      ]),
      items: [
        {
          text: '黄金糕',
          props: new Map<string, any>([
            ['command', '黄金糕']
          ])
        }
      ]
    }
  }
  private statusButtonActive: boolean = false
  private statusButtonData: ComponentModel = {
    text: 'TgButtonStatus',
    props: new Map<string, any>([
      ['icon', 'el-icon-antd-sync']
    ]),
    events: new Map<string, Function | Function[]>([
      ['click', (active: boolean) => {
        console.log(active)
      }]
    ]),
    meta: {
      tip: 'TgButtonStatus'
    }
  }
  private tableData: any = {
    handleTableItems: (querier: any) => {
      return [
        buildTableItem('input01', '输入 01'),
        buildTableItem('input02', '输入 02')
      ]
    },
    load: (params: any, page: number, limit: number) => {
      const { input01, input02 } = params
      let items = [
        { input01: '01', input02: '01-01' },
        { input01: '02', input02: '02-02' },
        { input01: '03', input02: '03-03' },
        { input01: '04', input02: '04-04' },
        { input01: '05', input02: '05-05' },
        { input01: '01', input02: '01-06' },
        { input01: '02', input02: '02-07' },
        { input01: '03', input02: '03-08' },
        { input01: '04', input02: '04-09' },
        { input01: '05', input02: '05-10' },
        { input01: '01', input02: '01-11' },
        { input01: '02', input02: '02-12' },
        { input01: '03', input02: '03-13' },
        { input01: '04', input02: '04-14' },
        { input01: '05', input02: '05-15' },
        { input01: '01', input02: '01-16' },
        { input01: '02', input02: '02-17' },
        { input01: '03', input02: '03-18' },
        { input01: '04', input02: '04-19' },
        { input01: '05', input02: '05-20' },
        { input01: '01', input02: '01-21' },
        { input01: '02', input02: '02-22' },
        { input01: '03', input02: '03-23' },
        { input01: '04', input02: '04-24' },
        { input01: '05', input02: '05-25' },
        { input01: '01', input02: '01-26' },
        { input01: '02', input02: '02-27' },
        { input01: '03', input02: '03-28' },
        { input01: '04', input02: '04-29' },
        { input01: '05', input02: '05-30' }
      ]
      items = items.filter((item, index) => {
        if (isNotEmpty(input01) && input01 !== item.input01) return false
        if (isNotEmpty(input02) && input02 !== item.input02) return false
        return true
      })
      const total = items.length
      items = items.filter((item, index) => {
        if (!(index < limit * page && index >= limit * (page - 1))) return false
        return true
      })
      return Promise.resolve(emptyResponse({ total, items }))
    }
  }
  private formData: any = {
    // linkage: true,
    handleFormItems: (operate: string, model: any) => {
      return [
        buildFormItem('input01', '输入 01', [buildInput('el-input', 'input01')]),
        buildFormItem('input02', '输入 02', [buildInput('el-input', 'input02')])
      ]
    }
  }
  private controlBarData: { leftItems: ComponentModel[], rightItems: ComponentModel[] } = {
    leftItems: [
      { tag: 'el-button-package', text: 'Left-01' },
      { tag: 'el-button-package', text: 'Left-02' },
      { tag: 'el-button-package', text: 'Left-03' }
    ],
    rightItems: [
      {
        tag: 'el-button-package',
        text: 'Right',
        meta: { selectedRowVisible: true }
      }
    ]
  }

  get name() {
    return userModule.name
  }

  get avatar() {
    return userModule.avatar
  }

  get roles() {
    return userModule.roles
  }

  mounted() {
    const formDialogRef = this.$refs['ref-tg-form-basic-dialog'] as ITgFormBasicDialog
    if (isNotEmpty(formDialogRef)) {
      formDialogRef.initForm('view')
    }
    const tableBasicRef = this.$refs['ref-tg-table-basic'] as ITgTableBasic
    if (isNotEmpty(tableBasicRef)) {
      tableBasicRef.initTable()
    }
    const tableDialogRef = this.$refs['ref-tg-table-basic-dialog'] as ITgTableBasicDialog
    if (isNotEmpty(tableDialogRef)) {
      tableDialogRef.initTable()
    }
    const treeBasicRef = this.$refs['ref-tg-tree-basic'] as ITgTreeBasic
    if (isNotEmpty(treeBasicRef)) {
      treeBasicRef.initTree()
    }
    const tableCategoryRef = this.$refs['ref-tg-table-category'] as ITgTableCategory
    if (isNotEmpty(tableCategoryRef)) {
      tableCategoryRef.initTable()
    }
  }

  private handleValue(value: any) {
    this.value = value
    console.log('handleValue > ', value)
  }

  private handleModel(model: any) {
    this.model = model
    console.log('handleModel > ', model)
  }

  private categoryLinkage(data: any, node: TreeNode<any, any>) {
    const input01 = data.input01
    return { input01 }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  min-height: 100vh;
  padding: 50px 60px 0px;

  .info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
